<template>
  <div class="menu-upload-container">
    <div class="upload-instruction">
      Upload your menu (PDF, JPG, or Screenshot)
    </div>
    
    <div class="upload-controls">
      <el-upload
        action="http://82.156.136.78:8015/file/upload"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeUpload"
        accept=".pdf,.jpg,.jpeg,.png"
        :show-file-list="false"
      >
        <el-button type="primary" class="choose-file-btn">
          <i class="el-icon-upload"></i> Choose File
        </el-button>
      </el-upload>
      
      <el-button 
        type="success" 
        class="submit-btn"
        @click="submitForm"
        :disabled="!fileUploaded"
      >
        Submit
      </el-button>
    </div>
    
    <div class="upload-info">
      <div class="format-info">1. Supported formats: PDF, JPG, PNG (Max 5MB)</div>
      <div class="process-info">
        2. We'll extract dish names, prices, and generate a comparison-ready summary.
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUploaded: false,
      uploadedFile: null
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
             console.log("上传成功！服务器返回：", res);
      this.fileUploaded = true;
      this.uploadedFile = file;
      this.$message.success('File uploaded successfully');
    },
    
    beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error('File size cannot exceed 5MB');
        return false;
      }
      return true;
    },
    
    submitForm() {
      if (!this.fileUploaded) {
        this.$message.warning('Please upload a file first');
        return;
      }
      // 这里添加提交逻辑
      this.$emit('submit', this.uploadedFile);
    }
  }
}
</script>

<style scoped>
.menu-upload-container {
  width: 100%;
  margin: 20px 0;
  padding: 25px;
  border-radius: 12px;
  background-color: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.upload-instruction {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 20px;
  /* text-align: center; */
}

.upload-controls {
  display: flex;
  /* justify-content: center; */
  gap: 15px;
  margin-bottom: 20px;
}

.upload-info {
  margin-top: 20px;
}

.format-info,
.process-info {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.format-info::before,
.process-info::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: #78909c;
}
</style>